<#import "/macro.ftl" as m>
<@m.page_header title='后台' />
<div id="page-content-wrapper">

<div id="page-title">

    <h3>
        收支统计
        <small>
            
        </small>
    </h3>
</div>

<div class="example-box">
    <div class="example-code">

        <a href="/stat/inoutstat/0" class="btn large primary-bg" title="">
            <span class="button-content">今日统计</span>
        </a>
        &nbsp;&nbsp;
        <a href="/stat/inoutstat/1" class="btn large primary-bg" title="">
            <span class="button-content">昨日统计</span>
        </a>
        &nbsp;&nbsp;
        <a href="/stat/inoutstat/7" class="btn large primary-bg" title="">
            <span class="button-content">7日统计</span>
        </a>
        &nbsp;&nbsp;
        <a href="/stat/inoutstat/30" class="btn large primary-bg" title="">
            <span class="button-content">30日统计</span>
        </a>
        &nbsp;&nbsp;
        <a href="/stat/inoutstat/100" class="btn large primary-bg" title="">
            <span class="button-content">全部统计</span>
        </a>

    </div>
   </div>
   
   <#if msg!='a'&&msg!='b'&&msg!='d'&&param!='a'>
   		<form id="form" action="/stat/inoutstat/10" method="get">
    		<div class="form-row">
    			<div class="form-input col-md-2">
    				<#if startTime>
            		<input type="text"   name="startTime" data-trigger="focus" data-required="true" class="parsley-validated" value="${startTime}" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd'})" style="clear:both;overflow:hidden;display:block">
          			<#else>
    				<input placeholder="时间" type="text"   name="startTime" data-trigger="focus" data-required="true" class="parsley-validated" value="" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd'})" style="clear:both;overflow:hidden;display:block">
    				</#if>
    			</div>
    			<div class="form-input col-md-2">
		        	<a href="javascript:;" class="btn large primary-bg radius-all-4" id="search" title="Validate!" onclick="$('#form').trigger('submit');">
			            <span class="button-content">
			                查询
			            </span>
	                </a>
		        </div>
    		</div>
    	</form>
    </#if>	
   
<div class="pad10A">

<div>
<div style="width:450px;float:left;">
    <div class="form-row">
        <div class="form-label col-md-4">
            <label for="">
                <#if msg=='a'>7日总收入:<#elseif msg=='b'>30日总收入:<#elseif msg=='c'>总收入:<#elseif msg=='d'>昨日总收入:<#else>今日总收入:</#if>
                <span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="income"  name="income" data-type="number" class="parsley-validated" value="${income}">
        </div>
    </div>
    <div class="form-row">
        <div class="form-label col-md-4">
            <label for="">
                <#if msg=='a'>7日总支出:<#elseif msg=='b'>30日总支出:<#elseif msg=='c'>总支出:<#elseif msg=='d'>昨日总支出:<#else>今日总支出:</#if>
                <span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="expenses"  name="expenses" data-type="number" class="parsley-validated" value="${expenses}">
        </div>
    </div>
    <div class="form-row">
        <div class="form-label col-md-4">
            <label for="">
                <#if msg=='a'>7日总赎回人数:<#elseif msg=='b'>30日总赎回人数:<#elseif msg=='c'>总赎回人数:<#elseif msg=='d'>昨日总赎回人数:<#else>今日总赎回人数:</#if>
                <span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="persons"  name="persons" data-type="number" class="parsley-validated" value="${persons}">
        </div>
    </div>
</div>

		<div id="canvas-holder">
			<div class="center-div">
				<div class="col-md-6" id="inoutchart" ></div> 
			</div>
	    </div>
</div>

</div>
</div>

<script type="text/javascript" src="/assets/js/minified/demo/exporting.js"></script>
<script type="text/javascript" src="/assets/js/minified/demo/highcharts.js"></script>
<script>

$(function () {
    $('#inoutchart').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '收入、支出金额（元）'
        },
        xAxis: {
            categories: [
                '7日前','6日前','5日前','4日前','3日前','前日','昨日','今日'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: '元'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y} 元</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '收入',
            data: [${sevenDayAgoOfIncome},${sixDayAgoOfIncome},${fiveDayAgoOfIncome},${fourDayAgoOfIncome},${threeDayAgoOfIncome},${twoDayAgoOfIncome},${oneDayAgoOfIncome},${todayOfIncome}]
        },{
            name: '支出',
            data: [${sevenDayAgoOfExpense},${sixDayAgoOfExpense},${fiveDayAgoOfExpense},${fourDayAgoOfExpense},${threeDayAgoOfExpense},${twoDayAgoOfExpense},${oneDayAgoOfExpense},${todayOfExpense}]
        }]
    });
});

</script>
